<!DOCTYPE html> <!-- Destop version -->
<html manifest="cache.manifest">
<head>

<?php require_once 'tile_head.php'; ?>

<link rel="stylesheet" href="css/uKey_d.css" />
<link rel="stylesheet" href="css/slides_show_d.css" />

<script type="text/javascript">
	$( '#uPageKey' ).live( 'pageinit',function(event){
		UKey.getInstance().init(false);
		UKey.getInstance().loadData();
	});
	
	$( '#uPageSlideShow' ).live( 'pageinit',function(event){
		UKey.getInstance().doSlideShow();
		uStartSlideShow();
	});
	
	$( '#uPageOfflineDataset' ).live( 'pageinit',function(event){
		UStorage.getInstance().showDataSet();
	});	
	
	$(document).bind( "pagebeforechange", function( e, data ) {
		if ( typeof data.toPage === "string" ) {
			var urlObj = $.mobile.path.parseUrl( data.toPage );
			if ( urlObj.hash.search(/^#uPageCharacter/) !== -1 ) {
				UCharacter.getInstance().show(urlObj, data.options);
				e.preventDefault();
			} else if ( urlObj.hash.search(/^#uPageTaxon/) !== -1 ) {
				UTaxon.getInstance().show(urlObj, data.options);
				e.preventDefault();			
			}
		}
	});
	
</script>

</head>
<body>
	<div data-role="page" data-title="Loading..." id="uPageKey">
		<div data-theme="b" data-role="header" style="text-transform: capitalize;">
			<a href="index_d.php" data-ajax="false" data-icon="home">Home</a>
			<h1 id="uTitle">Loading...</h1>
			<a href="#uPageSlideShow">Images</a>			
		</div>

		<div id="uContent" data-role="content" style="text-align: center;">
			<div id="uInkURL" style="font-weight: bold;font-size: 100%"></div>
			<div id="uSubTitle" style="text-transform: capitalize;"></div>
		
			<div id="uPK_content"></div>
		</div>
	</div>
	<div data-role="dialog" id="uPageCharacter">
		<div data-role="header" data-theme="b" style="text-transform: capitalize;">
			<h1>Character</h1>
		</div>

		<div data-role="content" data-theme="b" style="text-align: center;">
			<div id="uPC_cTitle" style="font-size: 110%;text-transform: capitalize;"></div>
			<div id="uPC_error" style="color:red;"></div>
			<center><div id="uPC_content"></div></center>
			<br/>
			
			<a href="" data-rel="back" data-icon="delete" data-inline="true" data-theme="b" data-role="button">Cancel</a>    
			<a href="" onclick="UCharacter.getInstance().setValue();" data-rel="back" data-inline="true" data-icon="check" data-theme="b" data-role="button">Set Value</a>       
		</div>
	</div>
	
	<div data-role="dialog" id="uPageTaxon" >
		<div data-role="header" data-theme="b" style="text-transform: capitalize;">
			<h1>Taxon</h1>
		</div>

		<div data-role="content" data-theme="b" style="text-align: center;">
			<div id="uPT_content" style="text-align: left;padding-left: 15px; padding-right: 15px; " ></div>
			<a href="" data-rel="back" data-icon="delete" data-inline="true" data-theme="b" data-role="button">Close</a>    
		</div>
	</div>	
	
	<div data-role="dialog" id="uPageSlideShow"  data-theme="d">
		<div data-role="header" data-theme="b" style="text-transform: capitalize;">
			<h1>Images</h1>
		</div>
		
		<div data-role="content" data-theme="b" style="text-align: center;" id="uPSlide_content">
			<div id="slides">
				<div class="slides_container" id="uPS_slidesContainer"></div>
			</div>
		</div>
	</div>	
	
</body>
</html>
